Introduction

Before you jump into developing an app, you’ll want a plan that defines what the key elements are and where they’ll be placed. One way to accomplish this is by creating a wireframe.

Think of a wireframe as an architect's drawing or a blueprint for a digital product. The purpose of a wireframe is to create a basic design structure for each screen before fleshing it out further with elements such as branding, colors, and images.

It provides a way of communicating ideas quickly to allow for better refinement. The focus is placed on the user experience and what’s required to accomplish a task.

Wireframes can be sketched out on paper. However, in this exercise, you'll be using Figma , the cloud-based software of choice for designing and prototyping wireframes. You can share your file with other team members, giving them the opportunity to collaborate and make comments on the same document.

In this exercise, you will create a wireframe for the home screen of the Little Lemon app.

Scenario

So, what are the requirements for the Little Lemon app? Consider this expected use case:

A new user expects to know what kind of restaurant Little Lemon is, and if it matches what they are looking for. Then, they will move onto either browsing the menu or searching directly for a specific item. The app requirements become content blocks that provide a nice skeleton of the overall layout in the wireframe design. These requirements are:

• Navigation bar and header

• The hero section, showcasing the Little Lemon restaurant

• Search bar

• Menu Categories (Starters, Mains, Desserts and Specials)

• Dishes section

With this in mind, let’s begin.

Instructions

Step 1: Create the frame and Grid

Select an "iPhone 14 Plus" frame from the frames panel, then add a four-column layout grid to the frame with a margin of 25 and a gutter of 20 .

For a recap on how to create grids in Figma, visit the Figma help page .

Step 2: Construct the content blocks

On the first frame, the content blocks should contain the following:

• Navigation bar and header

• The hero section (main banner), which showcases the Little Lemon restaurant

• Search bar

• Menu Categories (Starters, Mains, Desserts and Specials)

• Dishes section

Now, use rectangles to construct the content blocks and give each block a name. Refresh your memory on using shapes in Figma by visiting Basic shape tools in Figma design . Refer to the following image as an example where Menu Breakdown is your menu categories and Menu Items are for the Dishes section.

For a recap on how to create and manipulate rectangles in Figma, refer to this help page . For help with adding and styling text, visit this guide .

Step 3: Setup

Next, click on the content blocks and drag them out of the frame.  Place the blocks beside the frame, ensuring that they are aligned with the top and bottom edges of the frame.

Select the content blocks and make them narrower by dragging them in from the sides or resizing them by changing the dimensions. Consult the image below as a rough guide of where to place content when designing within the frame.

Step 4: Navigation bar

Next, let’s create the navigation bar. The elements needed for the navigation bar include:

• The Little Lemon logo

• A link to the user profile account

Let’s start with the logo. Draw a rectangle and two diagonal lines inside it that cross at the center. This is common practice when denoting a placeholder on a wireframe if an image is not readily available. Refer to the image below for an example and then do the same for the user profile.

You may find the following Figma guides to be helpful for building the blocks of the wireframe:

• Adding fills to text and shape layers

• Create and apply text styles

• Adding images to files

• Working with the Line tool

Step 5: Hero block

In this step, you’ll design the Hero content block by completing the following:

• In the Hero content block, include the Little Lemon name as a main heading.

• Below the Little Lemon name, list the city of the restaurant with a brief description of the type of food on offer.

• Place an image of the food alongside the description. Recall using a placeholder in your wireframe in the absence of the image being available.

• The owner of Little Lemon wants customers to be able to search for a specific dish. Therefore, create a search bar with a magnifying glass as the icon.

• Add a grey background and continue populating the content block.

Step 6: Menu breakdown block

The next step is to design the Menu Breakdown block. The owner of Little Lemon wants customers to have the option of filtering the menu categories. Make sure to:

• Highlight the fact that this is a food delivery service.

• Add menu category filter buttons.

Step 7: Menu Items block

In this last step, you’ll complete the Menu Items block by adding the following placeholders for several items:

• Item name

• Item description

• Item price

• An image of the item

Notice that no colors, specific fonts, or images are included. It’s important to focus on the content, layout, and functionality when creating a wireframe.

Conclusion

In this exercise, you’ve explored the basics of wireframing. Specifically, you used grids to help establish consistent placement and alignment of content blocks and elements.

You completed the first screen and can now continue to wireframe and design your solution for any online service.